import { size, IFormProps, formItemLayoutLeft, tailFormItemLayoutLeft } from '../../utils/common';
import React from 'react';
import { connect } from 'dva';
import { Form, Row, Col, Button, Input, Tree, } from 'antd';
const Styles = require('../../styles/index.less');
import * as api from '../../api/api';
import Enumerable from 'linq';
import queryString from 'query-string';
import Menus from '../../utils/menu';
const TreeNode = Tree.TreeNode;

export interface IRoleProps extends IFormProps {
    role: any
}
class Role extends React.PureComponent<IRoleProps, any>{
    constructor(props) {
        super(props);
        this.state = {}
    }

    componentWillReceiveProps(nextProps) {
        const { role } = nextProps.role;
        const permissions = role && role.permissions || [];
        this.setState({ checkedKeys: permissions });
    }

    reset = () => {
        this.props.form.resetFields();
    }

    save = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, form) => {
            if (!err) {
                form.permissions = this.state!.checkedKeys;
                let { role } = this.props.role;
                form = Object.assign({}, role, form);
                this.props.dispatch({
                    type: 'role/saveRole',
                    payload: {
                        form,
                        callback: () => {
                            this.props.history.goBack();
                        }
                    }
                });
            }
        });
    }

    onCheck = (checkedKeys) => {
        //console.log('onCheck', checkedKeys);
        this.setState({ checkedKeys });
    }

    renderTreeNodes = (data) => {
        return data.map((item) => {
            if (item.children && item.children.length > 0) {
                return (
                    <Tree.TreeNode title={item.title} key={item.key}>
                        {this.renderTreeNodes(item.children)}
                    </Tree.TreeNode>
                );
            }
            return <Tree.TreeNode {...item} />;
        });
    }

    getTreeData = () => {
        let treedata = Enumerable.from(Menus)
            .where(x => !!x.key)
            .select(x => new Object({
                key: x.key,
                title: x.title,
                children: Enumerable.from(x.children || [])
                    .where(x => !!x.key)
                    .select(c => new Object({
                        key: c.key,
                        title: c['title'],
                    })).toArray()
            })).toArray();
        //console.log(treedata)
        return treedata;
    }

    render(): JSX.Element {
        const { getFieldDecorator } = this.props.form;
        const { role } = this.props.role;
        const { loading } = this.props;
        return (
            <Row className={Styles.F_BG_WHITE1}>
                <Row className={Styles.F_BG_WHITE}>
                    <Col span={12}>
                        <Form>
                            <Form.Item label="角色名" {...formItemLayoutLeft}>
                                {getFieldDecorator('name', {
                                    rules: [
                                        {
                                            required: true,
                                            message: '请输入角色名'
                                        }
                                    ],
                                    initialValue: role && role.name
                                })(<Input size={size}
                                    placeholder="请输入角色名" />)}
                            </Form.Item>
                            <Form.Item label="权限" {...formItemLayoutLeft}>
                                <Tree
                                    checkable
                                    checkedKeys={this.state!.checkedKeys}
                                    defaultExpandAll={true}
                                    onCheck={this.onCheck}
                                >
                                    {this.renderTreeNodes(this.getTreeData())}
                                </Tree>
                            </Form.Item>
                            <Form.Item {...tailFormItemLayoutLeft}
                            >
                                <Button size={size} loading={loading} type="primary" className={Styles.M_RIGHT} onClick={this.save}>保存</Button>
                                <Button size={size} onClick={this.props.history.goBack}>取消</Button>
                            </Form.Item>
                        </Form>
                    </Col>
                </Row>
            </Row>
        )
    }
}

export default connect(({ role, loading: { models: { role: loading } } }) => ({ role, loading }))(Form.create()(Role));